
<template>
    <div class="outbox">
        <!-- 顶部搜索 -->
        <van-search class="search" v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel"
            @update:model-value='onChange' shape="round" />
        <!-- 实时关键字 -->
        <div class="realtime">
            <!-- 第一个 -->
            <div class="first" v-if="realtimeListFirst.length >= 1">
                <!-- 左侧图片 -->
                <img class="firstImg" style="width: 40px;height: 40px;" :src="realtimeListFirst[0]?.imgPath">
                <!-- 中间信息 -->
                <div class="firstInfo">
                    <div class="firstInfoTop">{{ realtimeListFirst[0]?.keyword }}</div>
                    <div class="firstInfoBottom">
                        <div class="firstInfoBottomClass">{{ realtimeListFirst[0]?.category }}</div>
                        <div class="firstInfoBottomListen">
                            {{ realtimeListFirst[0]?.play > 10000 ? realtimeListFirst[0]?.play
                                > 100000000 ? (realtimeListFirst[0]?.play / 100000000).toFixed(2) + '亿' :
                                (realtimeListFirst[0]?.play / 10000).toFixed(2) + '万' : realtimeListFirst[0]?.play }}
                        </div>
                        <div class="firstInfoBottomTotal">{{ realtimeListFirst[0]?.tracks }}集</div>
                    </div>
                </div>
                <!-- 右边按钮 -->
                <div calss="firstPlay">
                    <van-icon name="play-circle-o" />
                </div>
            </div>
            <!-- 后面的 -->
            <div class="other" v-if="realtimeListOther.length >= 1" v-for="(item, index) in realtimeListOther" :key="index">
                {{ item.keyword }}
            </div>
        </div>
        <!-- 历史记录 -->
        <div class="history" v-if="historyList.length >= 1 && !value">
            <div class="historyTop">
                <div class="historyTopTitle">搜索历史</div>
                <van-icon @click="deleteHistory" name="delete-o" size="14" />
                <!-- <div class="historyTopIcon"></div> -->
            </div>
            <div class="historyMain">
                <div class="historyMainItem" v-for="(item, index) in historyList" :key="index">{{ item }}</div>
            </div>
        </div>
        <!-- 分类列表 -->
        <van-tabs v-model="active" @click-tab="changeClass" v-if="!value">
            <van-tab :title="item.categoryName" :name="item.categoryId" v-for="(item, index) in searchList"
                :key="index"></van-tab>
        </van-tabs>
        <!-- 关键字列表 -->
        <div class="keyword" v-if="!value">
            <div class="keywordItem" v-for="(item, index) in KeywordList" :key="index">
                <div class="keywordItemNum"
                    :class="{ active1: index == 0, active2: index == 1, active3: index == 2, active4: index > 2 }">{{
                        index + 1 }}</div>
                <div class="keywordItemName">{{ item.word }}</div>
                <div class="keywordItemMark up" v-if="item.shift == 1">↑</div>
                <div class="keywordItemMark " v-if="item.shift == 0">-</div>
                <div class="keywordItemMark down" v-if="item.shift == -1">↓</div>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { showToast } from 'vant';
import searchApi from '@/api/search';
import { useRoute, useRouter } from "vue-router"

const router = useRouter()

//历史记录数据
const historyList = ref<any>([])
//实时关键词数据
const realtimeListFirst = ref<any>([])
const realtimeListOther = ref<any>([])
// 分类数据
const searchList = ref<any>([])
//关键字列表数据
const KeywordList = ref<any>([])
// 请求关键字的参数：
const size = ref<number>(20)
const cgId = ref<number>(-1)



// 搜索框相关
const value = ref('');
const onSearch = (val: any) => {
    // historyList.value.unshift(val)
    // console.log('@@',historyList.value);
    if (val == '') {
        showToast('请输入搜索内容')
    } else {
        if (!historyList.value.indexOf(val)) {
            historyList.value.unshift(val)
            localStorage.setItem('historyList', JSON.stringify(historyList.value))
        } else {
            let i = historyList.value.indexOf(val)
            historyList.value.splice(i, 1)
            historyList.value.unshift(val)
            localStorage.setItem('historyList', JSON.stringify(historyList.value))
        }
    }

    router.push({
        path: '/searchlist',
        query: {
            kw: value.value,
            core: 'all',
            page: 1,
            rows: 5
        }
    })
};
const onCancel = () => {
    realtimeListFirst.value = []
    realtimeListOther.value = []
    goHome()
};
const onChange = () => {
    getRealtimeList()
    // console.log(value.value);
    console.log(1, realtimeListOther.value);


}

// 分类
const active = ref(0);

onMounted(() => {
    getSearchList()
    getKeywordList()
    if (JSON.parse(localStorage.getItem('historyList') as string)) {
        historyList.value = JSON.parse(localStorage.getItem('historyList') as string)
    }
})


//删除历史记录
const deleteHistory = () => {
    localStorage.removeItem('historyList')
    historyList.value = []
}

//点击取消去首页
const goHome = () => {
    router.push({
        path: '/home',
    })
}

//获取实时关键字数据
const getRealtimeList = async () => {
    const kw = value.value
    const paidFilter = 'false'
    const result = await searchApi.reqSearch(kw, paidFilter)
    console.log('实时关键字', result);
    realtimeListFirst.value = result.data.result.albumResultList
    realtimeListOther.value = result.data.result.queryResultList
    // console.log(1,realtimeListFirst.value);
    // console.log(2,searchList.value);



}

// 获取分类数据
const getSearchList = async () => {
    const result = await searchApi.reqHotList()
    // console.log('搜索分类',result);
    searchList.value = result.category
}
//获取关键字列表数据
const getKeywordList = async () => {
    const result = await searchApi.reqKeyWord(cgId.value, size.value)
    // console.log('关键字',result);
    KeywordList.value = result.hotWordResultList

}

//切换分类
const changeClass = (ind: any) => {
    console.log(ind);
    cgId.value = ind.name
    getKeywordList()
}



</script>

<style scoped lang="scss">
.outbox {
    width: 375px;

    .history {
        width: 342px;
        padding: 10px 14px 5px 14px;

        .historyTop {
            width: 342px;
            height: 16px;
            display: flex;
            justify-content: space-between;

            .historyTopTitle {
                font-size: 14px;
            }
        }

        .historyMain {
            width: 342px;
            display: flex;
            flex-wrap: wrap;

            // justify-content: flex-start;
            .historyMainItem {
                height: 30px;
                line-height: 30px;
                font-size: 16px;
                padding: 5px 15px;
                margin: 5px 10px 5px 0;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                background: #EEE9E9;
                border-radius: 5px;
            }
        }
    }

    .realtime {
        width: 342px;
        padding-right: 14px;
        padding-left: 14px;

        .first {
            width: 342px;
            height: 40px;
            padding: 14px 0;
            border-bottom: 1px solid #EEE9E9;
            display: flex;

            .firstInfo {
                margin-left: 10px;
                width: 263px;
                height: 40px;
                display: flex;
                flex-direction: column;

                .firstInfoTop {
                    width: 263px;
                    height: 20px;
                    line-height: 20px;
                    margin-bottom: 4px;
                    font-size: 14px;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    // white-space:nowrap;
                }

                .firstInfoBottom {
                    width: 263px;
                    height: 16px;
                    display: flex;

                    .firstInfoBottomClass {
                        border: 1px solid #EEE9E9;
                        height: 14px;
                        line-height: 14rpx;
                        font-size: 10px;
                        border-radius: 4px;
                    }

                    .firstInfoBottomListen {
                        margin-left: 14px;
                        font-size: 14px;

                    }

                    .firstInfoBottomTotal {
                        font-size: 14px;
                        margin-left: 14px;
                    }
                }
            }

            .firstPlay {
                width: 24px;
                height: 24px;
                margin-left: 5px;
            }
        }

        .other {
            width: 342px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            border-bottom: 1px solid #EEE9E9;
        }
    }

    .search {
        padding-left: 14px;
        padding-right: 14px;
    }

    .keyword {
        width: 328px;
        padding-left: 27px;
        padding-right: 15px;

        .keywordItem {
            width: 328px;
            height: 45px;
            display: flex;

            .keywordItemNum {
                width: 20px;
                height: 45px;
                line-height: 45px;

            }

            .active1 {
                color: red;
                font-size: 20px;
                font-weight: 500;
            }

            .active2 {
                color: orangered;
                font-size: 20px;
                font-weight: 500;
            }

            .active3 {
                color: orange;
                font-weight: 500;
                font-size: 20px;
            }

            .active4 {
                font-size: 14px;
                color: #FFA07A;
            }

            .keywordItemName {
                width: 288px;
                height: 45px;
                line-height: 45px;
                font-size: 16px;
                padding-left: 12px;

            }

            .keywordItemMark {
                width: 10rpx;
                height: 45rpx;
                line-height: 45px;
                font-size: 14px;
                text-align: center;
                font-weight: 900;
            }

            .up {
                color: green;
            }

            .down {
                color: red;
            }
        }
    }

}</style>
